<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  body{background: #F1F1F1}
  .head{width:285px;margin: 10px auto;}
  button{width: 120px;height: 40px;background: #009999;margin-right: 20px;outline: none;color: #fff;}
  #box{width: 1206px;height: 480px;margin: 20px auto;}
  #box div{width: 280px;height: 220px;padding: 10px;background: #fff;float: left;border-right: 2px solid #f1f1f1}
  #box div img{width: 100%;height: 180px;}
  #box div h3{width: 100%;height: 40px;line-height: 40px;text-align: center;background: #f1f1f1;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var Btn = document.getElementsByTagName('button');
      var Box = document.getElementById('box');
      var Div = Box.getElementsByTagName('div');
      var Img = Box.getElementsByTagName('img');
      var H3= Box.getElementsByTagName('h3');
      var josn = {
        url:["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"],
        name:["1-温馨办公","2-游戏桌面","3-汽车摇滚","4-狭路相逢","5-棒球小子","6-球鞋动力","7-游戏官网","8-指尖社区"]}
      var arr = [];
      var Onoff = true;
      for (var i = 0; i < Div.length; i++) {
        arr.push(i);
      };
      function inital(arry){
        for (var i = 0; i < Div.length; i++) {
          Img[i].src = josn.url[arry[i]];
          H3[i].innerHTML = josn.name[arry[i]];
        };
      }
      inital(arr);
      Btn[0].onclick = function(){
        arr.sort(function (a,b){
          if(Onoff){
            return b - a;
          }else{
            return a - b;
          }
        })
        Onoff = !Onoff;
        inital(arr);
      }
      Btn[1].onclick = function(){
        arr.sort(function (a,b){
          return Math.random() - 0.5;
        })
        inital(arr);
      }
    }
  </script>
</head>
<body>
  <div class="head">
    <button>从大到小</button>
    <button>打乱顺序</button>
  </div>
  <div id="box">
    <div><img src=""><h3></h3></div>
    <div><img src=""><h3></h3></div>
    <div><img src=""><h3></h3></div>
    <div style="border:none"><img src=""><h3></h3></div>
    <div><img src=""><h3></h3></div>
    <div><img src=""><h3></h3></div>
    <div><img src=""><h3></h3></div>
    <div style="border:none"><img src=""><h3></h3></div>
  </div>
</body>
</html>
</body>
</html>